<template>
    <view>
        <view class="uni-padding-wrap uni-common-mt body">
            <view class="uni-list uni-common-mt">
                <view class="uni-list-cell">
					</br>
                    <view class="uni-list-cell-db">
                        <textarea id="textarea" v-model="playSrc" class="uni-input textarea" type="text" placeholder="在此处输入播放地址" />
                    </view>
                </view>
            </view>
            <view class="uni-btn-v">
				<view class="uni-list-cell-db">
					<picker @change="bindPickerChange" :value="index" :range="playLine" range-key="name">
						<view class="uni-input">
							</br>
							<button size="default" style="width: 96%;" type="warn">{{playLine[index].name}}</button>
						</view>
					</picker>
					<button size="default" style="width: 96%;" type="primary" @click="playVideo" class="page-body-button play">播  放</button>
				</view>	
            </view>
			<view class="page-section-spacing">
                <image class="imgStyle" v-for="(item,index) in pageUrl" :key="index" :src="item.src" mode="widthFix" @click="getImgInfo(item)"></image>
            </view>
        </view>
    </view>
</template>

<script>
	import common from '@/common/common.js';
	export default {
		data() {
			return {
				webviewStyles: {
                    progress: {
                        color: '#FF3333'
                    }
                },
				pageUrl: [],
				htmlData: '',
				index: 0,
				source: '',
				gestureFlag: true,
				src: '',
				playSrc: '',
				visible: true,
				playLine: []
			}
		},
		onReady: function(res) {
			this.playLine = common.urlList;
			this.pageUrl = common.imgList;
			common.analysis = this.playLine[0].src;
		},
		methods: {
			// 播放
			playVideo: function () {
				let _this = this;
				if (this.playSrc === '' || this.playSrc === undefined) {
					uni.showModal({
						content: '播放地址不能为空',
						showCancel: false
					})
				} else {
					if (this.source === '' || this.source === undefined){
						this.source = this.playLine[0].src;
					}
					this.src = this.source + this.playSrc;
					common.pageUrl = this.src;
					uni.showModal({
						title: '打开方式',
						content: '当前应用打开或跳转至浏览器',
						cancelText: '当前应用',
						cancelColor: '#E96900',
						confirmText: '浏览器',
						confirmColor: '#007AFF',
						success: function(res){
							if (res.cancel) {
								_this.getPlayer();
							} else if (res.confirm) {
								_this.openBrowser(_this.src);
							}
						}
					})
				}
			},
			// 跳转至友情链接
			getImgInfo: function (item) {
				let _this = this;
				let url = item.url;
				common.websiteUrl = url;
				uni.showModal({
					title: '打开方式',
					content: '当前应用打开或跳转至浏览器',
					cancelText: '当前应用',
					cancelColor: '#E96900',
					confirmText: '浏览器',
					confirmColor: '#007AFF',
					success: function(res){
						if (res.cancel) {
							_this.openUrl();
						} else if (res.confirm) {
							_this.openBrowser(url);
						}
					}
				})
			},
			// 本地打开友情链接
			openUrl: function () {
				uni.navigateTo({
					url: '/pages/tabbar/web/web',
					success() {
						console.log("成功");
					}
				})
			},
			// 本地打开播放页
			getPlayer: function () {
				uni.navigateTo({
					url: '/pages/tabbar/page/page',
					success() {
						console.log("成功");
					}
				})
			},
			// 获取线路
			bindPickerChange: function(e) {
				this.index = e.target.value;
				this.source = this.playLine[e.target.value].src;
				common.analysis = this.source;
			},
			// 打开浏览器
			openBrowser: function (src) {
				plus.runtime.openURL(src, function(res) {  
					console.log(res);  
				});
			}
		}
	};
</script>

<style>
.content {
	text-align: center;
	height: 400upx;
	margin-top: 200upx;
}
.myVideo {
	width: 100%;
	text-align: center;
}
#textarea {
	width: 100%;
	text-align: center;
}
.play {
	margin-top: 30upx;
}
.page-section-spacing {
	margin-top: 40upx;
}
.body {
	margin-top: 100upx;
}
.imgStyle {
	width: 30%;
	margin-top: 30upx;
	margin-left: 2%;
}
</style>
